<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" info="Emp_ID"%>
	<%@ taglib uri="/WEB-INF/tlds/deptids" prefix="Dept"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="<c:url value="pages/main.css" />" />
 <link rel="stylesheet" type="text/css" href="<c:url value="pages/bootstrap.min.css" />" />
 
 	
    <script type="text/javascript"
        src="<c:url value="pages/jquery-2.1.0.min.js"/> "></script>
        
    <script type="text/javascript"
        src="<c:url value="pages/jquery.autocomplete.min.js"/> "></script>
       <script type="text/javascript" src="<c:url value="pages/jquery-ui.js"/>"></script>
 	<script type="text/javascript" src="<c:out value="pages/bootstrap.min.js"/>">
		
	</script>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<script type="text/javascript">
	$(document).ready(function(){
		$('#ename').autocomplete({
			source: '${pageContext.request.contextPath}/ecntr/gnslist.htm',
			minLength: 2,
			focus: function () {
		        // prevent value inserted on focus
		        return false;
		    },
			select:function(evt,ui){
					console.log("hi"+ui);
					$('#eno').val(ui.item.id);
					$('#ename').val(ui.item.ename);
					$('#email').val(ui.item.email);
					$('#salary').val(ui.item.salary);
					$('#deptid').val(ui.item.deptid.toLowerCase());
					return false;
			},
			
		})
		.data("autocomplete")._renderItem = function(ul,item){
			
			return $("<li></li>")
					.data("item.autocomplete",item)
					.append("<a>"+item.ename+"</a>")
					.appendTo(ul);
		};
		
		$.ajax({
			url:'${pageContext.request.contextPath}/ecntr/gdpts.htm',
			type: 'GET',
			dataType: 'JSON',
			success: function(json)
	        {
	             $.each(json, function(i, vle) {
	            	 console.log("v "+$('#deptid').val());
	            	 var newOption=$('<option value="'+vle.deptid+'">'+vle.deptid+'</option>');
	            	   $('#deptid').append(newOption);
	            });

	        } 
		});
	});
	</script>
	
</head>
<body>

	<form class="form-horizontal">
		<fieldset>
		
		<!-- Form Name -->
		<legend>Create Employee</legend>
			
			<!-- Text input-->
				<div class="control-group">
				  <label class="control-label" for="textinput">Emp No</label>
				  <div class="controls">
				    <input id="eno" name="textinput" placeholder="your id " class="input-medium" required="" type="text">
				    
				  </div>
				</div>

			<!-- Text input-->
				<div class="control-group">
				  <label class="control-label" for="textinput">Emp Name</label>
				  <div class="controls">
				    <input id="ename" name="textinput" placeholder="Name.." class="input-medium" required="" type="text" >
				    <!-- 
				    <script type="text/javascript">
				    //	$('#ename').change(function(){
				    //		alert("hello");
				    //		$(document).ready();
				    //	}); 		
				    	
				    </script>-->
				  </div>
				</div>

		<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="textinput">Emp email</label>
			  <div class="controls">
			    <input id="email" name="textinput" placeholder="Emp mail_id" class="input-medium" required="" type="text">
			    
			  </div>
			</div>

		<!-- Text input-->
			<div class="control-group">
			  <label class="control-label" for="textinput">Emp salary</label>
			  <div class="controls">
			    <input id="salary" name="textinput" placeholder="Emp salary"  class="input-medium" required="" type="text">
			    
			  </div>
			</div>

		<!-- Select Basic -->
			<div class="control-group">
			  <label class="control-label" for="selectbasic">Department Id</label>
			  <div class="controls">
			    <select id="deptid" name="selectbasic" class="input-medium">
			      <option>select</option>

			    </select>
			  </div>
			</div>

		<!-- Button -->
			<div class="control-group">
			  <label class="control-label" for="singlebutton"></label>
			  <div class="controls">
			    <button id="singlebutton" name="singlebutton" class="btn btn-success">click to save</button>
			  </div>
			</div>

		</fieldset>
	</form>
</body>
</html>